<template>
  <div>
    <div class="homepage">
      <div class="content">
        <div id="box1" class="box" />
        <div id="box2" class="box" />
        <p>{{ sign }}</p>
        <div id="box3" class="box" />
        <div id="box4" class="box" />
      </div>
    </div>
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>
<style scoped>
.homepage {
  height: 577px;
  background: url(http://pic1.win4000.com/wallpaper/8/58ddb59a0de07.jpg)
    no-repeat;
  background-size: 100% 120%;
  color: #fff;
  font-size: 28px;
  margin-top: -39px;
  margin-left: -19px;
  animation: bg infinite 100s linear alternate;
}
@keyframes bg {
  0% {
    background-size: 110% 130%;
  }
  10% {
    background-size: 111% 131%;
  }
  20% {
    background-size: 112% 132%;
    background-position: bottom;
  }
  30% {
    background-size: 113% 133%;
  }
  40% {
    background-size: 114% 134%;
  }
  50% {
    background-size: 115% 135%;
    background-position: left;
  }
  60% {
    background-size: 116% 136%;
  }
  70% {
    background-size: 117% 137%;
  }
  80% {
    background-size: 118% 138%;
    background-position: right;
  }
  90% {
    background-size: 119% 139%;
  }
  100% {
    background-size: 120% 140%;
  }
}
.content {
  display: inline-block;
  position: relative;
  top: 40%;
  left: 45%;
}
p {
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  letter-spacing: 10px;
  margin-left: 32px;
}
.box {
  display: inline-block;
  width: 100px;
  height: 20px;
}
#box1 {
  border-left: 8px solid;
  border-top: 8px solid;
  position: relative;
  right: 150px;
  bottom: 20px;
}
#box2 {
  border-top: 8px solid;
  border-right: 8px solid;
  position: relative;
  left: 150px;
  bottom: 20px;
}
#box3 {
  border-left: 8px solid;
  border-bottom: 8px solid;
  position: relative;
  right: 150px;
  top: 20px;
}
#box4 {
  border-right: 8px solid;
  border-bottom: 8px solid;
  position: relative;
  left: 150px;
  top: 20px;
}
</style>
<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Timeline from './components/Timeline'
export default {
  name: 'Profile',
  components: { UserCard, Timeline },
  data() {
    return {
      sign: '十一组',
      circleUrl:
        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
      user: {},
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      }
    }
  }
}
</script>
